<?php
$this->Html->script('controllers/Exams/start_exam.js?1', array('block' => 'scriptBottom'));
$this->Html->css('controllers/Exams/start_exam.css?1', array('block' => 'stylesTop'));
$this->Html->script('vendors/jquery.countdown.min.js?1', array('block' => 'scriptBottom'));
$appBosch->urlFinish = $this->Html->url(array('controller' => 'Exams', 'action' => 'resume'));
$appBosch->urlNext = $this->Html->url(array('controller' => 'Exams', 'action' => 'nextQuestion'));
$appBosch->txtQuitMessage = __('¿Estás seguro que deseas abandonar el examen?');
$appBosch->qMessages = array(
    'txtSelectAnswer' => __('Debes seleccionar una respuesta.'),
    'txtQuitMessage' => __('Estas abandonando el examen. Contará como una oportunidad perdida. ¿Estás seguro que deseas abandonar el examen?'),
    'txtSkipMessage' => __('Tienes seleccionada una respuesta de esta pregunta. ¿Estás seguro que deseas saltar esta pregunta?'),
    'Yes' => __('Si'),
    'No' => __('No')
);
$appBosch->messageVideo = __('Tu navegador no soporta el formato del video.');
?>
    <div class="clockContainer">
        <div id="progress" class="pull-left">
            
        </div>
        <div id="clock">

        </div>
    </div>
<?php if ($appBosch->rc === "00"): ?>
    <div id="question"></div>
<?php else: ?>
    <div class="alert alert-danger">
        <?php echo $appBosch->rm; ?>
    </div>
<?php endif; ?>
    <div class="options container">
        <button id="quitExam" class="btn btn-danger btn-lg pull-left"><?php echo __('Abandonar examen'); ?></button>
        <button id="nextQuestion" class="btn btn-primary btn-lg pull-right"><?php echo __('Siguiente'); ?></button>
        <button id="skipQuestion" class="btn btn-info btn-lg pull-right"><?php echo __('Saltar pregunta'); ?></button>
    </div>
    <div class="loading">
        <span class="fa fa-refresh fa-spin"></span>
    </div>
    <div id="window"></div>
    <div id="dlg"></div>
    <script id="tmpQuestion" type="text/kendo-template">
        <div class="question" data-id-q="#=question.id#">
            #if(question.image !== null && question.image !== ''){#
            <div class="questionItem">
                <img src="#=question.image#"/>
            </div>
            #}#
            #if(question.video !== null && question.video !== ''){#
            <div class="questionItem">
                <video controls>
                    <source src="#=question.video#" type="video/mp4">
                    #=messageVideo#
                </video>
            </div>
            #}#
            <p>
                #= question.description #
                #if(question.mandatory == 1){#
                <span class="fa fa-star"
                      title="<?php echo __('Para poder continuar debes de contestar correctamente esta pregunta'); ?>"></span>
                #}#
            </p>
        </div>
        <div class="answers">
            # for (var i = 0; i < question.answers.length; i++) {
            var answer = question.answers[i];#
            <div class="answer">
                <input type="checkbox" name="answer" value="#=answer.id#" id="#=answer.id#">
                <label for="#=answer.id#">
                    #if(answer.image !== null && answer.image !== ''){#
                    <img src="#=answer.image#"/>
                    #}#
                    #=answer.description#
                </label>
            </div>
            # } #
        </div>
    </script>
    <script type="text/kendo-template" id="quitWindowTemplate">
        <p>#=txtQuitMessage#</p>
        <div class="optionsDlg">
            <button class="k-button" id="yesButton">#=Yes#</button>
            <button class="k-button" id="noButton">#=No#</button>
        </div>
    </script>
    <script type="text/kendo-template" id="skipWindowTemplate">
        <p>#=txtSkipMessage#</p>
        <div class="optionsDlg">
            <button class="k-button" id="yesSButton">#=Yes#</button>
            <button class="k-button" id="noSButton">#=No#</button>
        </div>
    </script>
    <script type="text/kendo-template" id="progressTemplate">
        <span>#=count#</span>/<span>#=totalQs#</span>
    </script>
<?php $this->start('jsVars'); ?>
    <script type="text/javascript">
        var appBosch = <?php echo json_encode($appBosch); ?>;
    </script>
<?php $this->end();